<template>
	<view>
		<view class="alldiv">
			<view class="headdiv">
				<web-view style="background-color: #fafafa;" class="webview" ref="webview" :fullscreen="false"
					@message="getMessage" src="/hybrid/html/maps/reciverOrder.html"></web-view>
				<!-- <cover-image class="back" @click="returns" src="@/static/image/arrow-left.png"></cover-image> -->
				<!-- <van-icon name="arrow-left" class="back" @click="returns" /> -->
				<!-- <map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map> -->
				<!-- <view id="map" class="map" tabindex="0"></view> -->
			</view>

			<view class="bodydiv">
				<!-- 订单信息 -->
				<view class="order-info">
					<view class="title">
						{{ language.FreeRide.zzqwmdd }}
					</view>
				</view>

				<!-- 司机信息 -->
				<view class="driver-info">
					<view class="profile-photo mr10">
						<u-avatar :size="44" :src="driverInfo.headPortrait || profilePhoto"></u-avatar>
					</view>
					<!-- <view class="license-plate mr10">粤A·123456</view> -->
					<view>
						<view class="licence-plate">
							{{ driverInfo.licensePlateNum }}
						</view>
						<view class="vehicle-info">
							<text class="driver-name">{{ driverInfo.name }}</text> {{ driverInfo.carModel }}
						</view>
					</view>
					<view class="left">
						<a :href="'tel:' + driverInfo.mobile" class="contact-driver" v-show="driverInfo.mobile">
							<u-icon :name="dialPhoto"></u-icon>
						</a>
						<a class="contact-driver">
							<u-icon :name="messagePhoto"></u-icon>
						</a>
					</view>
				</view>

				<!-- 帮助 -->
				<view class="other-use">
					<view class="other-use-item" v-for="(item,i) in otherUseList" :key="item.id">
						<u-icon :name="item.icon" size="16"></u-icon>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>

			  <view class="imagediv">
				  <u-swiper
						height="80"
						radius="67"
						circular
						:list="bannerList"
						keyName="picture"
				  >
				  </u-swiper>
			  </view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDriverInfo,
		getTaxiOrder,
		getBannerList
	} from '@/api/driver'
	// import GoogleMap from "@/mixins/GoogleMap";
	export default {
		// mixins: [GoogleMap],
		data() {
			return {
				bannerList: [],
				language: {},
				profilePhoto: require('@/static/image/BankCard.png'),
				dialPhoto: require('@/static/image/dial.png'),
				messagePhoto: require('@/static/image/message.png'),
				otherUseList: [{
						id: 0,
						icon: require('@/static/image/seek-help.png'),
						name: '紧急求助',
					},
					{
						id: 1,
						icon: require('@/static/image/path.png'),
						name: '路线选择',
					},
					{
						id: 2,
						icon: require('@/static/image/service.png'),
						name: '客服中心',
					},
					{
						id: 3,
						icon: require('@/static/image/share.png'),
						name: '行程分享',
					}
				],
				orderId: 0,
				driverId: 0,
				driverInfo: {},
				intervalId: 0,
				intervalId2: 0,
				endLatLng: null,
				wv: null,
				num: 0
			}
		},
		onLoad(option) {
			if (!option.id || !option.driverId) {
				this.returns()
			}
			this.orderId = option.id
			this.driverId = option.driverId
			this.getBannerList()
			this.getlanguagedata();
			this.getDriver(option.driverId);
			this.getOrder()
			this.intervalId = setInterval(this.getCurrentPosition, 3 * 1000)
			this.intervalId2 = setInterval(this.getOrder, 5 * 1000)
		},
		beforeDestroy() {
			// wssocket.close();
			this.intervalId && clearInterval(this.intervalId)
			this.intervalId2 && clearInterval(this.intervalId2)
		},
		onShow() {
			this.setHeight()
		},
		mounted() {
			this.setHeight()
		},
		methods: {
			async getBannerList() {
					try{
						const res = await getBannerList({
							pageNo: 1,
							pageSize: 100,
							status: 0,
							name: 2
						})
						if(res.code === 0) {
							this.bannerList = res.data
						}
					}catch(e){
						console.log(e,666)
					}
			},
			// 设置高度
			setHeight() {
				// 设置 iframe 高度和发送消息
				// #ifdef APP-PLUS
				let currentWebview = this.$scope.$getAppWebview();
				let boxHeight = 0
				uni.getSystemInfo({
					success: res => boxHeight = res.windowHeight // 屏幕可用高度
				})
				setTimeout(() => {
					this.wv = currentWebview.children()[0];
					this.wv.setStyle({
						top: 0,
						height: 342,
						background: 'transparent',
						zindex: 1
					})
				}, 1000)
				// #endif
			},
			getMessage(res) {
				const data = (res.detail.data && res.detail.data[0]) || {};
				switch (data.action) {
					case 'getCurrentPosition':
						console.log(data.position)
						if (data.position && this.endLatLng) {
							this.wv?.evalJS(
								`initMap2(${JSON.stringify(data.position)}, ${JSON.stringify(this.endLatLng)})`
							);
						}
						break;
				}
			},
			getlanguagedata() {
				this.language =
					this.$store.getters["internationalization/getinternationalization"];
			},
			returns() {
				uni.navigateTo({
					url: `/pages/Home/freeRide/index`,
				});
			},
			// 获取司机信息
			getDriver(driverId) {
				try {
					getDriverInfo({
						id: driverId
					}).then(res => {
						this.driverInfo = res.data
					})
				} catch (error) {
					console.log(error)
				}
			},
			async getOrder() {
				try {
					await getTaxiOrder({
						id: this.orderId
					}).then(res => {
						if (res.code === 0) {
							if (Number(res.data.orderStatus) === 2) {
								// 已结束
								this.intervalId && clearInterval(this.intervalId)
								this.intervalId2 && clearInterval(this.intervalId2)
								uni.navigateTo({
									url: `/pages/Home/freeRide/feeDetails?id=${this.orderId}`,
								});
							} else {
								this.endLatLng = {
									latitude: parseFloat(res.data.endLatitude),
									longitude: parseFloat(res.data.endLongitude)
								}
								// const startLatLng = {
								// 	latitude: parseFloat(res.data.startLatitude),
								// 	longitude: parseFloat(res.data.startLongitude)
								// };
								// this.wv?.evalJS(
								// 	`initMap2(${JSON.stringify(startLatLng)}, ${JSON.stringify(this.endLatLng)})`
								// );
							}
						}
					})
				} catch (error) {
					console.log(error)
				}
			},
			// 实时获取乘客当前位置
			getCurrentPosition() {
				this.wv?.evalJS(
					`getCurrentPosition()`
				);
			}
		}
	}
</script>

<style lang="less" scoped>
	.alldiv {
		width: 100%;
		height: 100vh;

		.headdiv {
			position: relative;
			width: 100%;
			height: 342px;
			overflow: hidden;


			.back {
				position: absolute;
				left: -40rpx;
				top: 100rpx;
				width: 160rpx;
				height: 120rpx;
				transform: scale(0.5)
			}
		}

		.bodydiv {
			// margin-top: -20rpx;
			padding: 48rpx 32rpx;
			width: 100%;
			height: calc(100vh - 342px);
			border-radius: 20px 20px 0 0;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
			overflow-y: auto;

			// 订单信息
			.order-info {
				.title {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 44rpx;
					color: rgba(56, 56, 56, 1);
				}
			}

			// 司机信息
			.driver-info {
				position: relative;
				margin-top: 48rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				color: #333;
				font-weight: bold;
				font-size: 28rpx;
				line-height: 40rpx;

				.profile-photo {
					width: 80rpx;
					height: 80rpx;
				}

				.vehicle-info {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);

					.driver-name {
						margin-right: 12rpx;
					}
				}

				.left {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					align-items: center;

					.contact-driver {
						margin-left: 24rpx;
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text-decoration: none;
						border-radius: 50%;
						background: rgba(255, 255, 255, 1);
						box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.1);

						img {
							width: 24rpx;

						}

						&:last-child img {
							width: 28rpx;
						}
					}
				}
			}

			.mr10 {
				margin-right: 20rpx;
			}

			// 其他操作
			.other-use {
				display: flex;
				justify-content: space-between;

				.other-use-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 144rpx;
					height: 120rpx;
					border-radius: 8rpx;
					background: rgb(255, 255, 255);
					box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.1);

					.name {
						margin-top: 8rpx;
						color: rgba(102, 102, 102, 1);
						font-size: 24rpx;
						line-height: 32rpx;
					}

					.phoneImg {
						width: 11px;
					}
				}
			}

			.imagediv {
				margin-top: 40rpx;
			}
		}
	}
</style>